<template>
  <view class="container">
    <!-- 二维码区域 -->
    <view class="qrcode-section">
      <!-- 用户信息 -->
      <view class="user-info">
        <text class="user-name">{{ userInfo.nickname || '会员昵称' }}</text>
        <view class="user-tag">经营</view>
      </view>
      
      <!-- 二维码容器 -->
      <view class="qrcode-wrapper">
        <view v-if="!qrCodeConfirmed" class="qrcode-placeholder">
          <text>请输入付款金额</text>
        </view>
        <tki-qrcode
          v-else
          ref="qrcode"
          :val="qrCodeValue"
          :size="208"
          :showLoading="false"
          :onval="true"
          loadingText="二维码生成中"
          unit="rpx"
        />
      </view>
      <view class="title">请先点击选择需要互转的类目</view>
      <view class="btn-box">
        <view class="btn" v-for="(item, index) in lists" :key="index" :class="{'active': activeIndex == index}" @click="handleClickItem(item, index)">{{item.name}}</view>
      </view>
      
      <!-- 金额显示 -->
      <view class="amount-display" v-if="amount && qrCodeConfirmed">收款{{scoreType|filterScoreType}}: ¥{{ amount }}</view>
      
      <!-- 底部按钮 -->
      <view class="action-buttons">
        <view class="action-btn" @click="showAmountModal">
          <text>收款设置</text>
        </view>
        <view class="action-btn" @click="saveQRCode" v-if="qrCodeConfirmed">
          <text>保存收款码</text>
        </view>
        <view class="action-btn" @click="showMoreOptions">
          <text>更多设置</text>
        </view>
      </view>
    </view>    
    <!-- 金额设置弹窗 -->
    <view class="modal" v-if="showModal">
      <view class="modal-mask" @click="closeModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text>设置收款{{scoreType|filterScoreType}}</text>
        </view>
        <view class="modal-body">
          <view class="amount-input-container">
            <text class="currency-symbol">￥</text>
            <input 
              type="digit" 
              v-model="tempAmount" 
              class="amount-input" 
              placeholder="请输入"
              focus
            />
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeModal">取消</button>
          <button class="modal-btn confirm-btn" @click="confirmAmount">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      amount: '',          // 确认后的金额
      tempAmount: '',      // 临时输入的金额
      showModal: false,
      qrCodeConfirmed: false,  // 是否已确认生成二维码
      type: 'business',     // 默认为经营收款码类型
      lists: [
        // {name: '金豆', value: 'store_score'},
        // {name: '积分', value: 'ticket'},
        {name: '余额', value: 'user_money'},
        // {name: '权益包', value: 'bonus'},
      ],
      activeIndex: null,
      scoreType: '',        // 转账的类型
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'inviteCode', 'appConfig', 'isLogin']),
    
    // 计算二维码内容
    qrCodeValue() {
      if (!this.amount) return '';
      
      const paymentData = {
        userId: this.userInfo.id || '10001',
        amount: this.amount,
        scoreType: this.scoreType, ////  转账的类型
        timestamp: Date.now(),
        type: this.type
      };
      
      return JSON.stringify(paymentData);
    }
  },
  methods: {
    handleClickItem(item, index) {
      this.scoreType = item.value;
      this.activeIndex = index;
    },
    // 显示金额设置弹窗
    showAmountModal() {
      if (this.activeIndex === null) {
        uni.showToast({
          title: '请先选择类目',
          icon: 'none'
        });
        return;
      }
      this.tempAmount = this.amount; // 加载当前金额到临时变量
      this.showModal = true;
    },
    
    // 关闭金额设置弹窗
    closeModal() {
      this.tempAmount = ''; // 清空临时金额
      this.showModal = false;
    },
    
    // 确认金额并生成二维码
    confirmAmount() {
      if (!this.tempAmount || parseFloat(this.tempAmount) <= 0) {
        uni.showToast({
          title: '请输入有效金额',
          icon: 'none'
        });
        return;
      }

 
      // 设置确认的金额
      this.amount = this.tempAmount;
      this.qrCodeConfirmed = true;
      this.closeModal();

      //触发函数
      // uni.$emit('dataToParent', '12131');
      // uni.navigateBack();
    },
    
    // 保存二维码
    saveQRCode() {
      if (!this.qrCodeConfirmed) {
        uni.showToast({
          title: '请先设置收款金额',
          icon: 'none'
        });
        return;
      }
      
      // 调用组件的保存方法
      this.$refs.qrcode._saveCode();
    },
    
    // 显示更多选项
    showMoreOptions() {
      uni.showActionSheet({
        itemList: ['清除金额', '重新生成', '关于收款码'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.amount = '';
              this.qrCodeConfirmed = false;
              break;
            case 1:
              if (this.amount) {
                this.$nextTick(() => {
                  // 刷新二维码
                  this.$refs.qrcode.createQrcode();
                });
              } else {
                uni.showToast({
                  title: '请先设置收款金额',
                  icon: 'none'
                });
              }
              break;
            case 2:
              uni.showModal({
                title: '关于收款码',
                content: '收款码用于线下场景的付款收款，顾客可通过扫描二维码向您付款。',
                showCancel: false
              });
              break;
          }
        }
      });
    }
  },
  filters: {
    filterScoreType(value) {
      switch (value) {
        case 'store_score': return '金豆';
        case 'ticket': return '积分';
        case 'user_money': return '余额';
        case 'bonus': return '权益包';
        default: return value;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #FFD000; /* 微信支付黄色背景 */
  padding-top: 30rpx;
}

.qrcode-section {
  margin: 30rpx;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  align-self: center;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-right: 15rpx;
}

.user-tag {
  padding: 4rpx 12rpx;
  background-color: #07C160;
  color: #FFFFFF;
  font-size: 24rpx;
  border-radius: 8rpx;
}

.qrcode-wrapper {
  width: 460rpx;
  height: 460rpx;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx 0;
  border: 1rpx solid #EEEEEE;
  position: relative;
}

.qrcode-placeholder {
  width: 400rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F8F8F8;
  font-size: 32rpx;
  color: #999999;
}

.amount-display {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin: 20rpx 0;
}

/* 底部按钮 */
.action-buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 40rpx;
  padding: 20rpx 0;
  border-top: 1rpx solid #F0F0F0;
}

.action-btn {
  font-size: 28rpx;
  color: #576B95;
  padding: 10rpx 0;
}

/* 经营账户入口 */
.business-account {
  margin: 30rpx;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-text {
  font-size: 32rpx;
  color: #333333;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
}

.modal-header {
  padding: 30rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #F0F0F0;
}

.modal-body {
  padding: 40rpx 30rpx;
}

.amount-input-container {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #EEEEEE;
  padding-bottom: 20rpx;
}

.currency-symbol {
  font-size: 40rpx;
  font-weight: bold;
  margin-right: 10rpx;
}

.amount-input {
  flex: 1;
  font-size: 40rpx;
  height: 80rpx;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #F0F0F0;
}

.modal-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  border-radius: 0;
  border: none;
}

.cancel-btn {
  background-color: #F8F8F8;
  color: #333333;
}

.confirm-btn {
  background-color: #07C160;
  color: #FFFFFF;
}

.btn-box {
  margin-top: 10rpx;
}

.title {
  font-size: 24rpx;
  color: #999999;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  text-align: left
}

.btn {
  padding: 8rpx 30rpx;
  border: 1rpx solid #999;
  color: #999;
  border-radius: 80rpx;
  display: inline-block;
  margin: 0 10rpx;
  font-size: 24rpx;
}

.btn.active {
  color: #fff;
  background-color: #194FFF;
  border-color: #194FFF; 
}
</style>